<template>
    <h1>投资项目信息列表(用户)</h1>
    
    <input type="text" v-model="Name" placeholder="请输入项目名称">
    <input type="button" value="查询" @click="ShowInvest" >

    <table>
        <thead>
            <tr>
                <th>投资编号</th>
                <th>投资项目名称</th>
                <th>总额度</th>
                <th>已投金额</th>
                <th>剩余额度</th>
                <th>投资次数</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Info" >
                <td>{{ item.I_Id }}</td>
                <td>{{ item.I_IName }}</td>
                <td>{{ item.I_SumMoney }}</td>
                <td>{{ item.I_YMoney }}</td>
                <td>{{ item.I_SMoney}}</td>
                <td>{{ item.I_Count }}</td>
            </tr>
        </tbody>

    </table>

    <span>
        共{{ Page.PageCount }}条数据,每页显示{{ Page.PageSize }}条,共{{ Page.PageIndex }}/{{ Page.totalCount }}页
    </span>


    <a href="#" @click="SunPage(1)" >首页</a>
    <a href="#" @click="SunPage(Page.PageIndex-1)" >上一页</a>
    <a href="#" @click="SunPage(Page.PageIndex+1)" >下一页</a>
    <a href="#" @click="SunPage(Page.PageCount)" >尾页</a>

    <input type="text" v-model="NewPaIndex" placeholder="请输入页码">
    <input type="button" value="跳转" @click="SunPaIn()" >

</template>

<script setup lang="ts">


import {ref,onMounted} from 'vue';
import axios from 'axios';

const Name = ref('');

const Info = ref([{
    I_Id:'',
    I_IName:'',
    I_SumMoney:'',
    I_YMoney:'',
    I_SMoney:'',
    I_Count:''
}])

const Page = ref({
    PageIndex:1,//当前页
    PageSize:3,//每页显示条数
    PageCount:0,//总条数
    totalCount:0,//总页数
})
const NewPaIndex = ref('');

onMounted (()=>{
    ShowInvest();
})

const ShowInvest = ()=>{
    axios({
        method:'get',
        url:'http://localhost:61480/api/Invest/ShowInvest',
        params:{
            Name:Name.value,
            PageIndex:Page.value.PageIndex,
            PageSize:Page.value.PageSize
        }
    })
    .then(function(res){
        console.log(res.data);
        Info.value = res.data.list;
        Page.value.totalCount = res.data.totalCount;
        Page.value.PageCount = res.data.PageCount;
        console.log(Page.value.totalCount);
        console.log(Page.value.PageCount);
    })
    .catch(function(err){
        console.log(err);
    })
}

const SunPage = (i:number)=>{
    alert(i);
    if(i>=1&&i<=Page.value.totalCount){
        Page.value.PageIndex = i;
        ShowInvest();
    }
    else{
        alert('输入的页码不正确');
        return;
    }
}

const SunPaIn = ()=>{
    if(Number(NewPaIndex.value) >=1&&Number(NewPaIndex.value)<=Page.value.totalCount){
      Page.value.PageIndex = Number(NewPaIndex.value) ;
        ShowInvest();
    }
    else{
        alert('输入的页码不正确');
        return;
    }
}

</script>